<template>
    <div class="handle-tree" @contextmenu.prevent="rightClick" @click="handleRightClose">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search-tree">
        </el-input>
        <el-tree class="tree" ref="tree" :filter-node-method="filterNode" draggable @node-drop="handleDrop" @node-click="handleNodeClick" @node-contextmenu="rightClick" :data="tree" :props="props"></el-tree>
        <ul class="handle-tree-ul handle-auth-create-top" v-show="is_create_top_auth_menu_show">
            <li @click="handleForm(0)">创建顶级</li>
        </ul>
        <ul class="handle-tree-ul handle-auth-create" v-show="is_menu_show">
            <li @click="handleForm(1)">添加下级</li>
            <li @click="handleForm(2)">编辑</li>
            <li @click="handleForm(3)">删除</li>
        </ul>
        <create-form v-on:changeFormShow="changeFormShow" :is_create="is_create" :is_form_show="is_form_show" :pid="pid" :form="form" :parent_id="parent_id"></create-form>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import authcreate from "@/api/auth_create.js";

import CreateForm from "./form.vue";

export default {
    name: "auth-tree",
    computed: {
        ...mapGetters("authcreate", ["auth_tree"])
    },
    components: {
        CreateForm
    },
    data() {
        return {
            tree: undefined,
            props: {
                label: "text",
                children: "children",
                value: "id"
            },
            pid: undefined,
            is_form_show: false,
            is_create: false,
            is_create_top_auth_menu_show: false,
            is_menu_show: false,
            form: undefined,
            parent_id: undefined,
            filterText: undefined
        };
    },
    mounted() {
        authcreate.getAuthTree().then(res => {
            this.tree = res;
        });
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.text.indexOf(value) !== -1;
        },
        rightClick(event, data, node, array) {
            let dom;
            if (data === undefined) {
                dom = document.getElementsByClassName(
                    "handle-auth-create-top"
                )[0];
                this.is_create_top_auth_menu_show = true;
                this.is_menu_show = false;
            } else {
                this.parent_id = node.parent.data.id;
                dom = document.getElementsByClassName("handle-auth-create")[0];
                this.is_create_top_auth_menu_show = false;
                this.is_menu_show = true;
                this.pid = data.id;
            }
            dom.style.left = event.pageX + "px";
            dom.style.top = event.pageY + "px";
            dom = null;
        },
        handleRightClose() {
            this.is_create_top_auth_menu_show = false;
            this.is_menu_show = false;
        },
        handleDrop(draggingNode, dropNode, dropType, ev) {
            if (dropType === "inner") {
                authcreate
                    .moveSite({
                        authId: draggingNode.data.id,
                        parentId: dropNode.data.id
                    })
                    .then(() => {
                        this.$message({
                            type: "success",
                            message: "移动成功!"
                        });
                    })
                    .catch(err => {
                        this.$message.error(err);
                    });
            } else {
                if (dropNode.level === 1) {
                    authcreate
                        .moveSite({ authId: draggingNode.data.id, parentId: 0 })
                        .then(() => {
                            this.$message({
                                type: "success",
                                message: "移动成功!"
                            });
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                } else {
                    authcreate
                        .moveSite({
                            authId: draggingNode.data.id,
                            parentId: dropNode.data.id
                        })
                        .then(() => {
                            this.$message({
                                type: "success",
                                message: "移动成功!"
                            });
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                }
            }
        },
        handleNodeClick(data, node) {
            this.handleRightClose();
            this.$store.dispatch("authcreate/changeIsAuthDetailShow", {
                show: true,
                id: data.id
            });
        },
        async handleForm(val) {
            switch (val) {
                case 0:
                    this.pid = 0;
                    this.is_form_show = true;
                    this.is_create = true;
                    break;
                case 1:
                    this.is_form_show = true;
                    this.is_create = true;
                    break;
                case 2:
                    await authcreate
                        .authDetail({ params: { authId: this.pid } })
                        .then(res => {
                            this.form = res;
                        });
                    this.is_form_show = true;
                    this.is_create = false;
                    break;
                case 3:
                    this.$prompt("请输入删除密码", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消"
                    })
                        .then(({ value }) => {
                            authcreate
                                .delAuth({ id: this.pid, password: value })
                                .then(res => {
                                    this.$store.dispatch(
                                        "authcreate/getAuthTree"
                                    );
                                    this.$store.dispatch(
                                        "authcreate/changeIsAuthDetailShow",
                                        { show: false }
                                    );
                                })
                                .catch(err => {
                                    this.$message.error(err);
                                });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "取消输入"
                            });
                        });
            }
        },
        changeFormShow(val) {
            this.is_form_show = val;
        }
    },
    watch: {
        auth_tree(newVal) {
            this.tree = newVal;
        },
        filterText(val) {
            this.$refs["tree"].filter(val);
        }
    }
};
</script>

<style>
</style>
